<template>
  <view>
    <!-- 数据输入区 -->
    <view class="userInfo">  
      <!-- 每一项 -->
      <view class="userInfo-item">
        <view class="iconfont icon-loudongguanli"></view>
        <text class="xuanz">选择楼栋</text>
        <!-- 弹出层 -->
        <view class="uni-list">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="uni-input">{{array[index]}}</view>
              </picker>
            </view>
          </view>
        </view>
        <view class="iconfont icon-xiangyoujiantou"></view> 
      </view>
      <view class="userInfo-item">
        <view class="iconfont icon-xiangxidizhi"></view>
        <text class="wenBen">详细地址</text>
        <input v-model="houseNumber" type="text" placeholder="请输入门牌号" />
      </view>   
      <view class="userInfo-item">
        <view class="iconfont icon-icon_mon_email-black"></view>
        <text class="wenBen">收件姓名</text>
        <input v-model="name" type="text" placeholder="输入取件姓名" />
      </view>
      
      <view class="userInfo-item">
        <view class="iconfont icon-dianhua"></view>
        <text class="wenBen">收件电话</text>
        <input v-model="phone" type="text" placeholder="输入取件电话" />
      </view>
      
      <!-- 开关 -->
      <view class="Switch">
        <text>是否设置为默认地址</text>
        <switch />
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <button class="saveAddress" @click="saveAddress">保存地址</button>
    
    <!-- 说明 -->
    <text class="zhuShi">地址说明</text>
  </view>
</template>

<script>
  import { UserAddAddress } from '../../request/api.js'
  export default {
    data() {
      // 弹出选择器
      const currentDate = this.getDate({
        format: true
      })
      return {
        title: 'picker',
        array: ['点击选择','教学区','其他区域'],
        index: 0,
        houseNumber: '',
        name: '',
        phone: ''
      }
    },
    methods: {
      // 弹出选择器模块
      getDate() {
        return new Date();
      },
      bindPickerChange: function(e) {
        // console.log('picker发送选择改变，携带值为', e.detail.value)
        this.index = e.detail.value
      },
      
      // 点击保存
      saveAddress(){
        const info = {
          build: this.array[this.index],
          houseNumber: this.houseNumber,
          name: this.name,
          phone: this.phone,
          users_id: uni.getStorageSync('userInfo').id
        }
        // console.log(info)
        UserAddAddress(info).then((res) => {
          uni.showToast({
            icon:'success',
            title: '添加成功'
          })
          // console.log(res)
        }).catch((err) => {
          console.log(err)
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/address/address'
          })
        },800)
      }
    }
  }
</script>

<style>
  page {
    background-color: #ffffff;
  }
  
  /* 用户输入区 */
  .userInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  /* 每一项 */
  .userInfo-item {
    width: 90%;
    height: 120rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e7e7e7;
  }

  .userInfo-item image {
    width: 80rpx;
    height: 70rpx;
    margin-right: -900rpx;
  }

  .userInfo-item input {
    margin-left: 150rpx;
    text-align: right;
  }

  /* 选择楼栋文本 */
  .xuanz{
    margin-right: 340rpx;
  }

  /* 开关 */
  .Switch {
    margin-top: 20rpx;
    margin-right: -300rpx;
  }

  .Switch text {
    color: #928f95;
    font-size: 32rpx;
    margin-right: 20rpx;
  }

  /* 保存按钮 */
  .saveAddress {
    width: 90%;
    border-radius: 100rpx;
    background: #0f67d0;
    color: #fff;
    margin-top: 100rpx;
  }

  /* 注释 */
  .zhuShi {
    margin-top: 24rpx;
    display: flex;
    justify-content: center;
  }
</style>